<template>
  <div class="content-target">
    <div class="top flex-between">
      <div class="tree">目标名称</div>
      <div class="flex-center">
        <div class="time flex-center">创建时间</div>
        <div class="operation flex-center">操作</div>
      </div>
    </div>
    <div class="tree-wrap">
      <el-tree
        :data="dataTree"
        node-key="zbnm"
        default-expand-all
        :expand-on-click-node="showTree"
        :props="defaultProps"
      >
        <span
          class="custom-tree-node"
          slot-scope="{ node, data }"
          @click="showNext(node, data)"
        >
          <div>
            <i class="el-icon-caret-rigth"></i><span>{{ node.label }}</span>
          </div>
          <div class="flex-center operation">
            <div class="time flex-center">{{ data.sjsj }}</div>
            <div class="btns flex-center">
              <div
                class="btn add flex-center"
                @click.stop="addTree(node, data)"
              >
                <div class="icon add"></div>
                <div class="tit">新增</div>
              </div>
              <div
                class="btn edit flex-center"
                @click.stop="editTree(node, data)"
              >
                <div class="icon edit"></div>
                <div class="tit">编辑</div>
              </div>
              <div class="btn del flex-center" @click.stop="delTree(data)">
                <div class="icon del"></div>
                <div class="tit">删除</div>
              </div>
            </div>
          </div>
        </span>
      </el-tree>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <div class="item-con flex-center" v-show="dialogTitle == '新增'">
        <span class="label">新增级别:</span>

        <el-select v-model="choosedLevel" placeholder="请选择">
          <el-option
            :label="item"
            :value="item"
            v-for="(item, index) in levels"
            :key="index"
          ></el-option>
        </el-select>
        <!-- <div class="item">
          <div class="first flex-between">
            <span>{{
              choosedLevel ? choosedLevel : "新增同级或者下级目标（默认同级）"
            }}</span>
            <span class="arrow"></span>
          </div>
          <div
            class="dropdown flex-center-start"
            :class="[choosedLevel == '同级' ? 'active' : '']"
            @click="chooseLevel('同级')"
          >
            同级
          </div>
          <div
            class="dropdown flex-center-start"
            :class="[choosedLevel == '同级' ? '' : 'active']"
            @click="chooseLevel('下级')"
          >
            下级
          </div>
        </div> -->
      </div>
      <div class="item-con flex-center">
        <span class="label">目标名称:</span>
        <div class="item">
          <input
            maxlength="50"
            class="input"
            v-model="targetName"
            placeholder="请输入..."
          />
        </div>
      </div>
      <div class="footer flex-center">
        <div class="cancel" @click="dialogVisible = false">取消</div>
        <div class="confirm" @click="submit">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      dialogVisible: false,
      choosedLevel: "同级",
      levels: ["同级", "下级"],
      defaultProps: {
        children: "childrenTarget",
        label: "mc",
        isLeaf: "leaf",
      },
      // dataTree: [],
      dialogTitle: "",
      targetName: "",
      clickNowNode: null, // 当前点击节点
      clickNowData: null, // 当前点击节点
      showTree: false,
      dataTree: [],
    };
  },
  computed: {
    ...mapState({
      user(state) {
        return state.user;
      },
    }),
  },
  created() {
    if (this.user.userRole != 1) {
      this.$router.push('/')
      return;
    }
    this.findAllTarget();
  },
  methods: {
    async findAllTarget() {
      let data = await this.$api.getCurrentChildrenTarget();
      this.dataTree = data;
    },
    chooseLevel(e) {
      this.choosedLevel = e;
    },
    editTree(node, data) {
      this.dialogTitle = "编辑";
      this.clickNowNode = node;
      this.clickNowData = data;
      this.targetName = this.clickNowData.mc;
      this.dialogVisible = true;
    },
    addTree(node, data) {
      this.dialogTitle = "新增";
      this.clickNowNode = node;
      this.clickNowData = data;
      this.dialogVisible = true;
      this.choosedLevel = "同级";
      console.log(node, data);
      this.targetName = "";
    },
    delTree(data) {
      this.$api
        .getMessageByNm({
          zbnm: data.zbnm,
        })
        .then((res) => {
          console.log(123, res);
          if (Object.keys(res).length > 0) {
            this.$confirm(
              "此操作将永久删除该目标组下所有子目标, 是否继续?",
              "提示",
              {
                confirmButtonText: "确定",
                showClose: false,
                closeOnClickModal: false,
                closeOnPressEscape: false,
                cancelButtonText: "取消",
                type: "warning",
              }
            ).then(() => {
              this.$api
                .newTargetDel({
                  zbnm: data.zbnm,
                })
                .then((data) => {
                  this.$message({
                    type: "success",
                    message: `"${data.message}"`,
                    showClose: true
                  });
                  this.findAllTarget();
                  this.$api.newTargetFindAllByTree().then((res) => {
                    this.$store.commit("app/setTargetTreeData", res);
                  });
                });
            });
          } else {
            this.$confirm("此操作将永久删除该目标, 是否继续?", "提示", {
              confirmButtonText: "确定",
              showClose: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              this.$api
                .newTargetDel({
                  zbnm: data.zbnm,
                })
                .then((data) => {
                  this.$message({
                    type: "success",
                    message: `"${data.message}"`,
                    showClose: true
                  });
                  this.findAllTarget();
                  this.$api.newTargetFindAllByTree().then((res) => {
                    this.$store.commit("app/setTargetTreeData", res);
                  });
                });
            });
          }
        });
    },
    submit() {
      if (this.dialogTitle == "新增") {
        if (this.choosedLevel == "") {
          this.$message({
            type: "warning",
            message: "请选择新增级别！",
            showClose: true
          });
          return;
        }
        if (this.targetName == "") {
          this.$message({
            type: "warning",
            message: "请输入目标名称！",
            showClose: true
          });
          return;
        }
        if (this.choosedLevel == "同级") {
          if (this.clickNowNode.level == 1) {
            this.$api
              .newTargetAdd({
                type: 0,
                zbnm: this.clickNowData.zbnm,
                mc: this.targetName,
              })
              .then((data) => {
                if (data.indexOf("200") != -1) {
                  this.dialogVisible = false;
                  this.findAllTarget();
                  this.$api.newTargetFindAllByTree().then((res) => {
                    this.$store.commit("app/setTargetTreeData", res);
                  });
                  this.$message({
                    type: "success",
                    message: data.split(",")[1],
                    showClose: true
                  });
                } else {
                  this.$message({
                    type: "warning",
                    message: data.split(",")[1],
                    showClose: true
                  });
                }
              });
          }
          else if (this.clickNowNode.level > 1) {
            this.$api
              .newTargetAdd({
                type: 0,
                zbnm: this.clickNowData.zbnm,
                mc: this.targetName,
              })
              .then((data) => {
                if (data.indexOf("200") != -1) {
                  this.dialogVisible = false;
                  this.findAllTarget();
                  this.$api.newTargetFindAllByTree().then((res) => {
                    this.$store.commit("app/setTargetTreeData", res);
                  });
                  this.$message({
                    type: "success",
                    message: data.split(",")[1],
                    showClose: true
                  });
                } else {
                  this.$message({
                    type: "warning",
                    message: data.split(",")[1],
                    showClose: true
                  });
                }
              });
          }
        }
        if (this.choosedLevel == "下级") {
          this.$api
            .newTargetAdd({
              type: 1,
              zbnm: this.clickNowData.zbnm,
              mc: this.targetName,
            })
            .then((data) => {
              if (data.indexOf("200") != -1) {
                this.dialogVisible = false;
                this.findAllTarget();
                this.$api.newTargetFindAllByTree().then((res) => {
                  this.$store.commit("app/setTargetTreeData", res);
                });
                this.$message({
                  type: "success",
                  message: data.split(",")[1],
                  showClose: true
                });
              } else {
                this.$message({
                  type: "warning",
                  message: data.split(",")[1],
                  showClose: true
                });
              }
            });
        }
      } else if (this.dialogTitle == "编辑") {
        if (this.targetName == "") {
          this.$message({
            type: "warning",
            message: "请输入目标名称！",
            showClose: true
          });
          return;
        }
        this.$api
          .newTargetUpdata({
            zbnm: this.clickNowData.zbnm,
            mc: this.targetName,
            xh: this.clickNowData.xh,
          })
          .then((data) => {
            if (data.indexOf("200") != -1) {
              this.dialogVisible = false;
              this.findAllTarget();
              this.$api.newTargetFindAllByTree().then((res) => {
                this.$store.commit("app/setTargetTreeData", res);
              });
              this.$message({
                type: "success",
                message: data.split(",")[1],
                showClose: true
              });
            } else {
              this.$message({
                type: "warning",
                message: data.split(",")[1],
                showClose: true
              });
            }
          });
        console.log("编辑");
      }
    },
    showNext(node, data) {
      console.log(node, data);
      if (!data.childrenTarget) {
        this.$set(data, "childrenTarget", []);
      }
      if (data.childrenTarget.length === 0) {
        this.$api.getCurrentChildrenTarget({ zbnm: data.zbnm }).then((res) => {
          
          for (let i = 0; i < res.length; i++) {
            data.childrenTarget.push(res[i]);
          }
          this.showTree = false;
        });
      } else {
        this.showTree = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.content-target {
  padding: 0 0.4rem 0 0.22rem;
  .top {
    height: 0.5rem;
    font-size: 0.16rem;
    font-weight: 400;
    color: #cccccc;
    .time {
      width: 1rem;
      margin-right: 2.9rem;
    }
    .operation {
      width: 2.84rem;
    }
  }
  .tree-wrap {
    ::v-deep .el-tree {
      color: #cccccc;
      margin-top: 0.1rem;
      background: transparent;
      .el-tree-node:focus > .el-tree-node__content {
        background-color: #034576; //背景色
      }
      .el-tree-node__content {
        height: 0.5rem;
        &:hover {
          background: #034576;
        }
      }
      .el-tree-node__label {
        font-size: 0.16rem;
        color: #cccccc;
        line-height: 0.25rem;
        letter-spacing: 0.01rem;
      }
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.14rem;
        padding-right: 0rem;
      }
      // .el-tree-node__expand-icon.is-leaf {
      //   color: white;
      // }
      .operation {
        .time {
          width: 1rem;
          margin-right: 2.9rem;
        }
        .btns {
          width: 2.84rem;
          .btn {
            width: 0.88rem;
            height: 0.28rem;
            border-radius: 0.05rem;
            &.edit {
              margin: 0 0.1rem;
            }
          }
          .icon {
            width: 0.15rem;
            height: 0.15rem;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
            &.add {
              background-image: url(~@/assets/common/add@2x.png);
            }
            &.edit {
              background-image: url(~@/assets/images/edit@2x.png);
            }
            &.del {
              background-image: url(~@/assets/images/del@2x.png);
            }
          }
          .add {
            background-color: #1890ff;
          }
          .edit {
            background-color: #1890ff;
          }
          .del {
            background-color: #e64f4f;
          }
          .tit {
            margin-left: 0.08rem;
            font-size: 0.14rem;
            font-weight: 400;
            color: #ffffff;
            margin-top: 0.03rem;
          }
        }
      }
    }
  }
  ::v-deep .el-dialog {
    color: #ffffff;
    font-size: 0.16rem;
    width: 7.2rem !important;
    background: #474747;
    box-shadow: 0rem 0rem 0.38rem 0rem rgba(0, 0, 0, 0.45);
    border-radius: 0.05rem;
    .el-dialog__header {
      padding: 0.16rem;
      background: #143853 !important;
    }
    .el-dialog__title {
      color: #ffffff;
    }
    .el-dialog__body {
      color: #ffffff;
      background: #0f2d43 !important;
    }
    .item-con {
      margin-bottom: 0.2rem;
      // align-items: flex-start;
      color: #ffffff;
      .label {
        // margin-top: 0.1rem;
      }
      .first {
        margin-bottom: 0.06rem;
        margin-left: 0.12rem;
        padding-left: 0.12rem;
        cursor: pointer;
        width: 5.2rem;
        height: 0.38rem;
        background: #0355a4 !important;
        border-radius: 0.05rem;
        .arrow {
          margin-top: 0.03rem;
          margin-right: 0.13rem;
          height: 0.12rem;
          width: 0.12rem;
          border-left: 0.06rem solid transparent;
          border-top: 0.06rem solid #cccccc;
          border-right: 0.06rem solid transparent;
          border-bottom: 0.06rem solid transparent;
        }
      }
      .dropdown {
        margin-bottom: 0.01rem;
        &.active {
          color: #1890ff;
          background: #0355a4 !important;
          // opacity: 0.65;
        }
        &:hover {
          color: #1890ff;
          background: #0355a4 !important;
          // opacity: 0.65;
        }
        margin-left: 0.12rem;
        padding-left: 0.12rem;
        cursor: pointer;
        width: 5.2rem;
        height: 0.38rem;
        background: #0355a4 !important;
        border-radius: 0.05rem;
      }
      .el-input__inner {
        color: white;
        margin-left: 0.12rem;
        padding-left: 0.12rem;
        cursor: pointer;
        width: 5.2rem;
        height: 0.38rem;
        background: #0355a4 !important;
        border-radius: 0.05rem;
        border: none;
      }
      .el-popper .popper__arrow,
      .el-popper .popper__arrow::after {
        display: none;
      }
      .el-input__suffix {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .input {
        color: white;
        margin-left: 0.12rem;
        padding-left: 0.12rem;
        cursor: pointer;
        width: 5.2rem;
        height: 0.38rem;
        background: #0355a4 !important;
        border-radius: 0.05rem;
        &::-webkit-input-placeholder {
          color: white;
        }
        &::-ms-input-placeholder {
          color: white;
        }
        &::-moz-placeholder {
          color: white;
        }
      }
      .el-button {
        width: 1.2rem;
        height: 0.38rem;
        background: #62656c;
        border-radius: 0.05rem;
      }
    }
    .footer {
      margin-top: 0.1rem;
      color: #ffffff;
      margin-right: 0.3rem;
      justify-content: flex-end;
      .cancel {
        text-align: center;
        width: 1.2rem;
        height: 0.38rem;
        line-height: 0.38rem;
        background: #62656c;
        border-radius: 0.05rem;
      }
      .confirm {
        margin-left: 0.2rem;
        text-align: center;
        width: 1.2rem;
        height: 0.38rem;
        line-height: 0.38rem;
        background: #1890ff;
        border-radius: 0.05rem;
      }
    }
  }
}
</style>